<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="/struts-dojo-tags" prefix="sx"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><s:property value="project.name" /></title>
<link rel="stylesheet" type="text/css"
	href="${ pageContext.request.contextPath }/css/common.css">
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/jquery-1.6.2.js"></script>
<script type="text/javascript"
	src="${ pageContext.request.contextPath }/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.masonry.min.js"></script>
	
<script src="${pageContext.request.contextPath}/js/rgraph/RGraph.common.core.js" ></script>
<script src="${pageContext.request.contextPath}/js/rgraph/RGraph.common.dynamic.js" ></script>
<script src="${pageContext.request.contextPath}/js/rgraph/RGraph.common.tooltips.js" ></script>
<script src="${pageContext.request.contextPath}/js/rgraph/RGraph.common.effects.js" ></script>
<script src="${pageContext.request.contextPath}/js/rgraph/RGraph.line.js" ></script>


<script>

	$(document).ready(
			function() {

				var $container = $('#project_stories');
				$container.imagesLoaded(function() {
					$container.masonry({
						itemSelector : '.detailed_story'
					});
				});
                
				//Burn Down Chart starts
				
				
	            $.ajax({
									type : "GET",
									url : '${ pageContext.request.contextPath }/statistics/projectBurnDownChart.action?projectId='+$("#projectId").val(),
									cache : false,
									success : function(data) {
										
										var line = new RGraph.Line('cvs_burndown', data.dataForBurnDown);
										line.Set('chart.curvy', true);
										line.Set('chart.title', "Project_Burn_Down");										
										line.Set('chart.labels.above', true);
										line.Set('chart.curvy.tickmarks', true);
										line.Set('chart.curvy.tickmarks.fill',null);
										line.Set('chart.curvy.tickmarks.stroke','#aaa');
										line.Set('chart.curvy.tickmarks.stroke.linewidth',2);
										line.Set('chart.curvy.tickmarks.size',3);
										line.Set('chart.linewidth', 3);
										line.Set('chart.hmargin', 5);
										line.Set('chart.labels', [ 1,2, 3, 4, 5,6]);
										line.Set('chart.tickmarks', 'circle');
										RGraph.Effects.Line.jQuery.Trace(line);
									}
								});

						//Burn Down Chart ends
						
						//Sprint result Chart starts
				
				
	                        $.ajax({
									type : "GET",
									url : '${ pageContext.request.contextPath }/statistics/projectSprintsChart.action?projectId='+$("#projectId").val(),
									cache : false,
									success : function(data) {
										
										var line = new RGraph.Line('cvs_sprints', data.dataForBurnDown);
										line.Set('chart.curvy', true);
										line.Set('chart.title', "Velocity");						
										line.Set('chart.labels.above', true);
										line.Set('chart.curvy.tickmarks', true);
										line.Set('chart.curvy.tickmarks.fill',null);
										line.Set('chart.curvy.tickmarks.stroke','#aaa');
										line.Set('chart.curvy.tickmarks.stroke.linewidth',2);
										line.Set('chart.curvy.tickmarks.size',3);
										line.Set('chart.linewidth', 3);
										line.Set('chart.hmargin', 5);
										line.Set('chart.labels', [ 1,2, 3, 4, 5,6]);
										line.Set('chart.tickmarks', 'circle');
										RGraph.Effects.Line.jQuery.Trace(line);
									}
								});

						//Sprint result Chart ends


						$("#createStory")
								.click(
										function() {
											DIALOG = $("#myDialog");
											DIALOG.dialog({
												autoOpen : false,
												title : "创建故事",
												modal : true,
												width : 600,
												height : 320,
												close : function() {
												}
											});
											var projectId = $("#projectId")
													.val();
											DIALOG.load(
													"${pageContext.request.contextPath}/story/loadCreateStory.action?projectId="
															+ projectId)
													.dialog('open');
										});

					});
</script>
</head>
<body>
    
	<div class="header">
		<div class="logo"></div>
		<div class="menu">
			<a href="">看板</a>
			<a href="">项目列表</a>
		</div>
		
	</div>
	<div class="project_content">

		   <div class="project_stories" id='project_stories' style="position: relative;" >
			<s:hidden name="projectId" value="%{projectId}" />
			<div id="storieslist">
				<div id="createStory" class="createStoryIcon"></div>
				<s:iterator value="project.stories">
					<div class="detailed_story">
						<s:property value="name" />
						</br>
						<s:property value="point" />
						</br>
						<s:property value="priority" />
						</br>
						<s:property value="dod" />
					</div>
				</s:iterator>
			</div>
			</div>
			<div class="project_leftpart">
			   
				<div class="project_burndown">
				  <canvas id="cvs_burndown" width="500" height="250">[No canvas support]</canvas>	
				</div>
				<div class="project_sprints">
				  <canvas id="cvs_sprints" width="500" height="250">[No canvas support]</canvas>
				</div>
				
			</div>
		</div>


		  <a href='${ pageContext.request.contextPath }/sprint/createSprint.action?projectId=<s:property value="project.id"/>'><strong>创建Sprint</strong></a>
          <a href='${ pageContext.request.contextPath }/story/loadCreateStory.action?projectId=<s:property value="project.id"/>'><strong>创建故事</strong></a>
		<div id="myDialog"
			style="width: 300px; height: 300px; margin-left: 30px;"></div>
</body>
</html>